<template>
	<z-paging-swiper class="page">
		<city-head></city-head>
		<z-tabs ref="tabsRef" scroll-count="1" :list="tabsList" :current="currentIndex" @change="changeTab"
			value-key="id" :active-style="{'font-size':'36rpx','font-weight':'bold','color': '#333333'}"
			:inactive-style="{'font-size':'28rpx','color': '#666666'}">
			<template slot="right">
				<view class="selectMore uni-flex uni-justify-between uni-align-center" @click="openFilterPopup">
					<text class="text-group_10">筛选</text>
					<image class="more_img" referrerpolicy="no-referrer" :src="`${$ImgBaseUrl}select_gray.png`" />
				</view>
				<!-- 筛选弹窗 -->
				<uni-popup ref="filterPopup" type="top">
					<FilterPopup ref="filterPopupContent" :tabsList="tabsList" :currentIndex="currentIndex"
						@tabChange="handleTabChange" @close="closeFilterPopup" @confirm="handleFilterConfirm"
						@reset="handleFilterReset" />
				</uni-popup>
			</template>
		</z-tabs>
		<swiper class="swiper" :current="currentIndex" @change="onChange" @transition="swiperTransition"
			@animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
				<find-job-item ref="listItem" :tabIndex="index" :currentIndex="currentIndex" :currentId="currentId"
					:filterParams="filterParams" />
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref,
		onMounted
	} from "vue";
	import findJobItem from "@/pages/tabBars/findJob/findJobItem.vue";
	import cityHead from "@/components/city-head/index.vue";
	import FilterPopup from "./components/FilterPopup.vue";
	import {
		queryTabList
	} from "@/api/findJob";

	const tabsRef = ref(null);
	const filterPopup = ref();
	const filterPopupContent = ref();
	const listItem = ref([]);

	const state = reactive({
		tabsList: [],
		currentIndex: 0,
		currentId: 1,
		filterParams: {}
	});
	const {
		tabsList,
		currentIndex,
		currentId,
		filterParams
	} = toRefs(state);

	const changeTab = (index, id) => {
		currentIndex.value = index;
		currentId.value = id;
		// 切换tab时重新加载数据
		reloadData();
	};

	const onChange = e => {
		currentIndex.value = e.detail.current;
	};

	const swiperTransition = e => {
		tabsRef.value.setDx(e.detail.dx);
	};

	const swiperAnimationfinish = e => {
		currentIndex.value = e.detail.current;
		tabsRef.value.unlockDx();
		// 动画结束时重新加载数据
		// reloadData();
	};

	const openFilterPopup = () => {
		filterPopup.value.open();
	};

	// 关闭筛选弹窗
	const closeFilterPopup = () => {
		filterPopup.value.close();
	};

	// 处理tab切换
	const handleTabChange = (index, id) => {
		currentIndex.value = index;
		currentId.value = id;
		reloadData();
	};

	// 处理筛选确认
	const handleFilterConfirm = (params) => {
		filterParams.value = params; // 存储筛选参数
		closeFilterPopup();
		reloadData(); // 重新加载数据
	};
	const resetUserServices = () => {
		// 通知筛选弹窗清除服务标签数据
		if (filterPopupContent.value) {
			filterPopupContent.value.clearUserServices();
		}
	};
	// 处理筛选重置
	const handleFilterReset = () => {
		filterParams.value = {};
		resetUserServices(); // 新增：重置服务标签
		reloadData();
	};

	// 重新加载数据
	const reloadData = () => {
		if (listItem.value && listItem.value[currentIndex.value]) {
			listItem.value[currentIndex.value].reload(filterParams.value);
		}
	};

	onMounted(() => {
		queryTabList().then(res => {
			tabsList.value = res.data;
		});
	});
</script>

<style lang="scss" scoped>
	.page {
		.swiper {
			height: 100%;
			background-color: #f5f5f5;
		}
	}

	.selectMore {
		width: 80rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		padding: 0 25rpx;

		.more_img {
			width: 16rpx;
			height: 16rpx;
			margin-top: 6rpx;
		}
	}
</style>